<!--
 * @FileDescription: 超级无敌table组件
 * @Author: XD
 * @Date: 10-15-2020
 * @LastEditors: 10-15-2020  
 * @LastEditTime: 10-15-2020s
 -->

<!--
slot使用方法
<template v-slot:a="slotData">
    <Edit :data="slotData.data"></Edit>
</template>
<template v-slot:add>
    <Add></Add>
</template>
-->

<template>
  <div class="bata_table">
    <!-- 头部 -->
    <div class="title-bareads">
      <!--            面包屑-->
      <div
        class="breadcrumbs"
        v-if="
          this.privateConfig.header.breadcrumb &&
          this.privateConfig.header.breadcrumb != 'false'
        "
      >
        <div class="goto" @click="$router.go(-1)">
          <i class="el-icon-back"></i>
        </div>
        <span class="span_an"></span>
        <div class="heto">{{ privateConfig.header.breadcrumb }}</div>
      </div>
    </div>

    <div class="right-select">
      <div class="right_base">
        <template v-for="(item, index) in this.privateConfig.header.search">
          <!-- 下拉 搜索栏-->
          <div
            class="private"
            :key="index"
            v-if="item.type == 'dropDown' || item.type == 'netDropDown'"
          >
            <p class="p_base">
              {{ item.label }}
            </p>

            <XDSelecter
              class="dropdown"
              v-model="item.value"
              :type="item.type"
              :list="item.list"
            ></XDSelecter>
          </div>

          <!--  时间data 搜索框    -->
          <div class="private" :key="index" v-if="item.type == 'datePicker'">
            <p class="p_base">
              {{ item.label }}
            </p>
            <XDDatePicker
              v-model="item.value"
              :placeholder="item.placeholder"
              type="date"
            ></XDDatePicker>
          </div>

          <!--  时间datatime 搜索框 -->
          <div
            class="private"
            :key="index"
            v-if="item.type == 'datePickerDateTime'"
          >
            <p class="p_base">
              {{ item.label }}
            </p>
            <XDDatePicker
              v-model="item.value"
              :placeholder="item.placeholder"
              type="datetime"
            ></XDDatePicker>
          </div>
          <!-- 带时间搓的datatime -->
          <div class="private" :key="index" v-if="item.type == 'stamp'">
            <p class="p_base">
              {{ item.label }}
            </p>
            <XDDatePicker
              v-model="item.value"
              :placeholder="item.placeholder"
              :stamp="item.stamp"
              type="datetime"
            ></XDDatePicker>
          </div>

          <!--层级下拉框-->
          <div class="private" :key="index" v-if="item.type == 'cascader'">
            <p class="p_base">
              {{ item.label }}
            </p>
            <XDCascader :list="item.list" v-model="item.value"></XDCascader>
          </div>

          <!--输入 搜索框-->
          <div class="private" :key="index" v-if="item.type == 'input'">
            <p class="p_base">
              {{ item.label }}
            </p>
            <XDInput
              v-model="item.value"
              class="input"
              :placeholder="item.placeholder"
              :dataType="item.dataType"
            ></XDInput>
          </div>
        </template>

        <!--  重置栏-->
        <div class="private" v-if="privateConfig.header.search.length > 0">
          <el-button
            size="small"
            class="inputButton"
            type="primary"
            @click="searchFunc"
            >搜索</el-button
          >
          <el-button
            style="color: #333"
            size="small"
            class="select"
            @click="reset"
            >重置</el-button
          >
        </div>

        <!--  新增栏-->

        <div class="private">
          <div class="add_more">
            <!-- 导入 -->
            <SJmodel
              v-if="this.privateConfig.header.model"
              :config="this.privateConfig.header.model"
            ></SJmodel>
            <!--                   导出-->
            <XDExport
              v-if="this.privateConfig.header.export"
              :config="this.privateConfig.header.export"
            ></XDExport>
             

            <qmExport
              v-if="this.privateConfig.header.qmexport"
              :config="this.privateConfig.header.qmexport"
            ></qmExport>
            <el-button
              size="small"
              v-if="
                privateConfig.header.addButton &&
                privateConfig.header.mineType == 1
              "
              class="select"
              icon="el-icon-plus"
              type="warning"
              @click="showAddDialog"
              >新增</el-button
            >
            <!--  新增插槽栏-->
            <template v-if="privateConfig.header.addButtonSlot">
              <slot :name="privateConfig.header.addButtonSlot"></slot>
            </template>
            <!-- 权限插槽 -->
            <template v-if="privateConfig.header.authority">
              <slot :name="privateConfig.header.authority"></slot>
            </template>

            <!--  头部插槽栏-->
            <slot name="headerAppend"></slot>
          </div>
        </div>
        <div class="private_right">
          <!-- 报警插槽 -->
          <template v-if="privateConfig.header.addPoliceSlot">
            <slot :name="privateConfig.header.addPoliceSlot"></slot>
          </template>
        </div>
      </div>
    </div>

    <div class="table_ba">
      <div class="table_base">
        <el-table
          :header-cell-style="{ background: '#F5F6F7', color: '#606266' }"
          max-height="55vh"
          height="55vh"
          ref="table"
          :data="tableData"
          size="medium"
          class="XDTable"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
        >
          <!-- 普通文字-->
          <template v-for="(item, index) in this.privateConfig.table">
            <el-table-column
              v-if="item.type == 'selection' && $store.state.qmTag"
              :key="index"
              type="selection"
              width="55"
            >
            </el-table-column>
            <!-- index序号-->
            <el-table-column
              :key="index"
              v-if="item.type == 'index'"
              :label="item.label || '序号'"
              align="center"
            >
              <template slot-scope="scope">
                <p :class="[backgroundColor(scope.row[item.backgroundColor])]">
                  {{ (page - 1) * 10 + scope.$index + 1 }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              :key="index"
              v-if="!item.type && !item.hidden"
              :prop="item.prop"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <p :class="[backgroundColor(scope.row[item.backgroundColor])]">
                  {{ scope.row[item.prop] }}
                </p>
              </template>
            </el-table-column>

            <!-- 下载按钮-->
            <el-table-column
              :key="index"
              v-if="item.type == 'download' && !item.hidden"
              :prop="item.prop"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <!-- <XDDownloader v-model="scope.row[item.prop]"></XDDownloader> -->
                <!-- {{scope.row[item.prop]}} -->
                <div v-if="scope.row[item.prop]">
              <el-button
                v-if="gettp(scope.row[item.prop]) == 1"
                size="mini"
                type="text"
                @click="look99(scope.row[item.prop])"
                >查看</el-button
              >
              <el-button
                v-if="gettp(scope.row[item.prop]) == 2"
                size="mini"
                type="text"
                @click="download99(scope.row[item.prop])"
                >下载</el-button
              >
            </div>
              </template>
            </el-table-column>

            <!-- 生成二维码 -->
            <el-table-column
              :key="index"
              v-if="item.type == 'qrcode' && !item.hidden"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
              <template slot-scope="scope">
                <XDqrcode
                  :value="item.link + '/' + scope.row[item.prop]"
                ></XDqrcode>
              </template>
            </el-table-column>
            <!-- 签名 -->
            <el-table-column
              :key="index"
              v-if="item.type == 'image' && !item.hidden"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row[item.prop]"
                  :preview-src-list="[scope.row[item.prop]]"
                >
                </el-image>
              </template>
            </el-table-column>

            <!-- 签到成员 -->
            <el-table-column
              :key="index"
              v-if="item.type == 'qrtext' && !item.hidden"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
              <template slot-scope="scope">
                <SJqrtext
                  :mineId="scope.row[item.prop]"
                  :value="item.link"
                ></SJqrtext>
              </template>
            </el-table-column>
            <!--普通按钮-->
            <el-table-column
              :key="index"
              v-if="item.type === 'button' && !item.hidden"
              :prop="item.prop"
              align="center"
              :label="item.label"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="item.callback(scope.row, item.prop)"
                  >{{ item.title }}</el-button
                >

                <el-button
                  size="small"
                  type="danger"
                  v-if="item.delete"
                  @click="beforeRemove(scope.row.id)"
                  >删除</el-button
                >

                <el-button
                  size="small"
                  type="danger"
                  v-if="item.deleteyp"
                  @click="beforeRemove(scope.row.realId)"
                  >删除</el-button
                >
              </template>
            </el-table-column>

            <!--转跳链接-->
            <el-table-column
              :key="index"
              v-if="item.type === 'link' && !item.hidden"
              :prop="item.prop"
              align="center"
              :label="item.label"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="item.callback(scope.row, item.prop)"
                  >{{ scope.row[item.prop] }}</el-button
                >
              </template>
            </el-table-column>

            <!--    处理文字-->
            <el-table-column
              :key="index"
              v-if="
                (item.type === 'dropDown' || item.type === 'radio') &&
                !item.hidden
              "
              :prop="item.prop"
              align="center"
              :label="item.label"
            >
              <template slot-scope="scope">
                <span
                  :class="[backgroundColor(scope.row[item.backgroundColor])]"
                  >{{ dropDownLabel(item.list, scope.row[item.prop]) }}
                </span>
              </template>
            </el-table-column>

            <!--   操作-->
            <el-table-column
              :key="item.index"
              v-if="item.type == 'operation' && !item.hidden"
              prop="isHandle"
              :label="item.label"
              align="center"
              width="300"
            >
              <template slot-scope="scope">
                <div style="display: flex; justify-content: center">
                  <template v-for="(item, index) in item.slotName">
                    <div :key="index" style="margin-right: 10px">
                      <slot :name="item" :data="scope.row"></slot>
                    </div>
                  </template>

                  <!--    查看-->
                  <el-button
                    size="small"
                    type="primary"
                    v-if="item.look"
                    @click="look(scope.row)"
                    >查看</el-button
                  >

                  <!--   编辑-->
                  <el-button
                    size="small"
                    style="background-color: #39ce75; color: #fff"
                    v-if="item.edit && item.mineType == 1"
                    @click="showEditDialog(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    style="background-color: #39ce75; color: #fff"
                    v-if="item.editjudge && item.mineType == 1"
                    @click="showEdit(scope.row)"
                    >编辑</el-button
                  >

                  <el-popover
                    v-if="item.stop"
                    placement="top-start"
                    width="100"
                    trigger="hover"
                  >
                    <el-button
                      v-if="scope.row.status == 0"
                      size="small"
                      type="success"
                      @click="showEditDialog(scope.row)"
                      >激活</el-button
                    >

                    <el-button
                      v-if="scope.row.status == 1"
                      size="small"
                      type="danger"
                      @click="stop(scope.row)"
                      >停用</el-button
                    >
                    <div
                      style="margin-left: 10px; margin-right: 10px"
                      slot="reference"
                      class="search"
                    >
                      <el-button size="small" type="warning">状态</el-button>
                    </div>
                  </el-popover>

                  <!--   删除-->
                  <el-button
                    size="small"
                    type="danger"
                    v-if="item.delete && item.mineType == 1"
                    @click="beforeRemove(scope.row.id)"
                    >删除</el-button
                  >

                  <el-button
                    size="small"
                    type="danger"
                    v-if="item.deleteyp && item.mineType == 1"
                    @click="beforeRemove(scope.row.realId)"
                    >删除</el-button
                  >

                  <el-button
                    size="small"
                    type="warning"
                    v-if="item.export"
                    @click="beforeexport(scope.row, item)"
                    >导出</el-button
                  >

                  <!--                  跳转-->
                  <el-button
                    v-if="item.redirect"
                    size="small"
                    type="primary"
                    @click="item.redirect.callback(scope.row, item.prop)"
                    >{{ item.redirect.title }}</el-button
                  >

                  <!--                            插槽-->
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <preview-content v-if="showType" :previewMsg="previewMsg"></preview-content>
      </div>

      <template v-if="this.privateConfig.footer.pagination">
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next, jumper,total"
            :total="this.tableLength"
            :page-size="10"
            @current-change="currentPageChanged"
            :current-page="page"
          ></el-pagination>
        </div>
      </template>
    </div>

    <EleFormComp
      :config="privateConfig"
      :visibilityUpdate="visibilityUpdate"
      :title="title"
      :id="id"
      :disabled="formDisabled"
    >
      <div :slot="slotNames[0].slotName" slot-scope="slotData">
        <slot :name="slotNames[0].slotName" :data="slotData.data"></slot>
      </div>
      <div :slot="slotNames[1].slotName" slot-scope="slotData">
        <slot :name="slotNames[1].slotName" :data="slotData.data"></slot>
      </div>
      <div :slot="slotNames[2].slotName" slot-scope="slotData">
        <slot :name="slotNames[2].slotName" :data="slotData.data"></slot>
      </div>
    </EleFormComp>
  </div>
</template>

<script>
import {
  loadTableData,
  deleteTableData,
  deleteTableData1,
  exportTableword,
  updateTableData,
} from "./request";
import { typeJson } from "./config.js";
import { downloadFile } from "./download";   
// import {downloadFile} from '@/utils/download.js'
import PreviewContent from "@/components/PreviewContent/PreviewContent.vue";
export default {
  name: "EleTableComp",
  props: ["config"],
  data() {
    return {
      showType: true,
      previewMsg: {
          dialogTableVisible: false,
          fileType: "",
          iframeUrl: "",
        },
      visibilityUpdate: 0, // 窗口是否可见
      id: -1, // id
      title: "", // 标题
      send: {}, //route关键字
      receive: {},
      formDisabled: "",
      privateConfig: {
        header: {
          breadcrumb: "",
          addButton: true,
          addButtonSlot: "",
          search: [
            {
              type: "input",
              prop: "",
              placeholder: "",
              value: "",
              label: "",
            },
            {
              type: "dropDown",
              prop: "",
              list: typeJson.deviceType,
              value: "",
              label: "",
            },
            {
              type: "dateRangePicker",
              value: "",
              fromProp: "a",
              toProp: "b",
              label: "",
            },
            {
              type: "dateTimeRangePicker",
              value: "",
              fromProp: "a",
              toProp: "b",
              label: "",
            },
          ],
          export: {
            url: "/deviceManager/exportExcel",
            method: "POST",
            mineId: false,
            currentPage: 1,
            pageSize: 10,
            data: {},
          },
          qmexport: {
            url: "/deviceManager/exportExcel",
            method: "POST",
            mineId: false,
            hidden: true,
            currentPage: 1,
            pageSize: 10,
            data: {},
          },
        },
        footer: {
          pagination: true,
        },
        backgroundColor: "",
        table: [
          {
            label: "图片名字",
            prop: "fileName",
            value: "",
            type: "download",
            addEditType: "upload", //'timePicker'
          },
          {
            label: "名誉名称",
            prop: "honourName",
            type: "function",
            callback: (row, prop) => {
              return row[prop];
            },
            value: "",
            //addEditType: 'upload',
            list: typeJson.sex,
          },
          {
            label: "颁发机构",
            prop: "giveDep",
            value: "",
            addEditType: "upload",
          },
          {
            label: "操作",
            prop: "", // 传数据的时候 忽略
            type: "operation",
            addEditHidden: true,
            edit: true,
            delete: true,
            look: true,
          },
        ],
        update: {
          url: "/companyHonour/edit",
          method: "POST",
          data: this.form,
          mineId: false,
          companyId: false,
        },
        delete: {
          url: "/companyHonour/delete",
          method: "POST",
          id: -1,
        },
        insert: {
          url: "/companyHonour/edit",
          method: "POST",
          data: this.form,
          mineId: false,
          companyId: false,
        },
        select: {
          url: "/companyHonour/getList",
          method: "POST",
          data: {},
          mineId: false,
          companyId: false,
          currentPage: 1,
          pageSize: 10,
        },
      },

      // 数据一共长度
      tableLength: 0,
      page: 1,
      tableData: [],
      obj: {
        multipleSelection: [],
      },
    };
  },
  provide() {
    return {
      multipleSelection: this.obj,
    };
  },
  computed: {
    slotNames: function () {
      let temp = [];
      for (let i = 0; i < this.privateConfig.table.length; i++) {
        if (this.privateConfig.table[i].addEditType == "slot") {
          temp.push(this.privateConfig.table[i]);
        }
      }
      while (temp.length < 3) {
        temp.push({ slotName: "" });
      }
      return temp;
    },
  },
  created() {
    this.initConfig();
    this.selectFunc();
  },

  watch: {
    // 监听路由变化
    $route: function (newVal, oldVal) {
      for (var newOne in newVal.query) {
        for (var i = 0; i < this.privateConfig.header.search.length; i++) {
          if (this.privateConfig.header.search[i].prop == newOne) {
            let newValue = newVal.query[newOne];
            if (newValue != "") {
              let num = Number(newValue);
              if (!isNaN(num)) {
                this.privateConfig.header.search[i].value = num;
              } else {
                this.privateConfig.header.search[i].value = newValue;
              }
            }
          }
          console.log(this.privateConfig.header);
          // if (this.privateConfig.header.search[i].hidden) {
          //     delete this.receive[this.privateConfig.header.search[i].prop]
          // }
        }
        if (newOne == "page") {
          let fullPath = oldVal.fullPath;
          if (fullPath.split("page=")) {
            let oldPage = fullPath.split("page=")[1];
            if (oldPage === newVal.query[newOne]) {
              this.page = 1;
            } else {
              this.page = parseInt(newVal.query[newOne]);
            }
          }
          delete this.receive.page;
        }
      }
      this.selectFunc();
    },
  },
  inject: ["reload"],
  methods: {
    handleSelectionChange(val) {
      this.obj.multipleSelection = val;
    },
    stop(e) {
      console.log(e);
      this.$confirm("此操作将停用账号, 是否继续??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let requestJson = this.privateConfig.update;
          if (requestJson.mineId) {
            searchData.mineId = this.$store.state.mineId;
          }
          if (requestJson.companyId) {
            searchData.companyId = this.$store.state.companyId;
          }
          if (requestJson.params) {
            Object.assign(searchData, searchData, requestJson.params);
          }
          // if (this.$routeParam()) {
          //   Object.assign(searchData, searchData, this.$routeParam());
          // }

          for (var key in searchData) {
            searchData[key] = decodeURIComponent(searchData[key]);
          }

          let searchData = {
            status: 0,
            memberId: e.memberId,
            memberName: e.memberName,
            idCard: e.idCard,
            nickName: e.nickName,
          };
          requestJson.data = searchData;

          updateTableData(requestJson).then((response) => {
            let success = response.success;
            if (!success) {
              this.onFailed(response.msg);
            } else {
              this.selectFunc();
            }
          });
        })
        .catch((e) => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    tableRowClassName({ row, rowIndex }) {
      let val = row[this.privateConfig.backgroundColor];

      for (var i = 0; i < typeJson.backgroundColor.length; i++) {
        if (val == typeJson.backgroundColor[i].label) {
          return typeJson.backgroundColor[i].value;
        }
      }

      return "";
    },

    backgroundColor(val) {
      for (var i = 0; i < typeJson.backgroundColor.length; i++) {
        if (val == typeJson.backgroundColor[i].label) {
          return typeJson.backgroundColor[i].value;
        }
      }
    },

    // 选择table 传 选中后的数据和搜索条件
    handleCurrentChange(val) {
      let s = this.privateConfig.header.search;
      let temp = {};
      for (let i = 0; i < s.length; i++) {
        temp[s[i].prop] = s[i].value;
      }
      this.$emit("handleCurrentChange", val, temp);
    },
    // 重置
    reset() {
      this.send = {};
      this.$router.replace(
        {
          path: this.$route.path,
          query: this.send,
        },
        () => {}
      );
      this.reload();
      for (var i = 0; i < this.privateConfig.header.search.length; i++) {
        this.privateConfig.header.search[i].value = "";
      }
    },
    download99(value){
        if (value.indexOf(",") >= 0) {
          let split = value.split(",");
          for (var i = 0; i < split.length; i++) {
            if (split[i] != "") {
              let num = split[i].lastIndexOf(".");
              let dis = split[i].substring(num + 1, num + 4);
  
              if (dis == "pdf" || dis == "PDF") {
                downloadFile(split[i], "a");
              } else {
                downloadFile(split[i], "iframe");
              }
            }
          }
        } else {
          let num = value.lastIndexOf(".");
          let dis = value.substring(num + 1, num + 4);
          if (dis == "pdf" || dis == "PDF") {
            downloadFile(value, "a");
          } else {
            downloadFile(value, "iframe");
          }
        }
      },
      gettp(v){
       
        let type = null
        if(v.includes(',')){
          let list = v.split(',')
          list.forEach(item => {
            type =  this.getFileType(item);
          });
  
        }else{
          type =  this.getFileType(v);
        }
        if(type=='pdf' || type=='txt'){
          return 1
        }else{
          return 2
        }
        
      },
      getFileType (url) {
        let pdfReg = /^.+(\.pdf)$/
        let txtReg = /^.+(\.txt)$/
        let wordReg = /^.+(\.doc|\.docx)$/
        let excelReg = /^.+(\.xls|\.xlsx)$/
        let jpgReg = /^.+(\.png|\.jpg|\.jpeg|\.bmp)$/
        if (pdfReg.test(url)) {
          return 'pdf'
        }
        if (txtReg.test(url)) {
          return 'txt'
        }
        if (wordReg.test(url)) {
          return 'word'
        }
        if (excelReg.test(url)) {
          return 'excel'
        }
        if (jpgReg.test(url)) {
          return 'picture'
        }
      },
      look99(v) {
        this.showType = false
        this.$nextTick(() => {
          this.showType = true
        })
        let list = v.split(',')
        this.previewMsg.dialogTableVisible = true;
        this.previewMsg.iframeUrl = list[0];
       
      },
    // 搜索处理
    searchFunc() {
      let s = this.privateConfig.header.search;
      for (let i = 0; i < s.length; i++) {
        this.send[s[i].prop] = s[i].value;
      }
      this.$router.replace({
        path: this.$route.path,
        query: this.send,
      });
    },

    // 分页处理
    currentPageChanged(val) {
      this.send.page = val;
      this.page = val;
      this.$router.replace({
        path: this.$route.path,
        query: this.send,
      });
    },

    // 处理下拉框显示文字
    dropDownLabel(list, val) {
      if (!list) return;
      for (var i = 0; i < list.length; i++) {
        if (list[i].value === val) return list[i].label;
      }
      return "";
    },

    // 初始化配置项
    initConfig() {
      let configData = this.config;
      let keys = Object.keys(this.privateConfig);
      for (let key in configData) {
        if (keys.includes(key)) {
          this.privateConfig[key] = configData[key];
        }
      }

      let page = this.getQueryVariable("page");
      if (page) this.page = parseInt(page);
      console.log(this.privateConfig);
    },

    // 获取参数
    getQueryVariable(variable) {
      let href = window.location.href;
      let query = href.substring(href.indexOf("?") + 1);
      let vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },

    // 查询
    selectFunc() {
      let searchData = { ...this.privateConfig.select.data };
      let requestJson = this.privateConfig.select;
      if (requestJson.mineId) {
        searchData.mineId = this.$store.state.mineId;
      }
      if (requestJson.companyId) {
        searchData.companyId = this.$store.state.companyId;
      }
      if (requestJson.params) {
        Object.assign(searchData, searchData, requestJson.params);
      }
      // if (this.$routeParam()) {
      //   Object.assign(searchData, searchData, this.$routeParam());
      // }

      for (var key in searchData) {
        searchData[key] = decodeURIComponent(searchData[key]);
      }

      requestJson.data = searchData;
      requestJson.currentPage = this.page;
      requestJson.pageSize = 10;

      loadTableData(requestJson)
        .then((response) => {
          let success = response.success;
          if (!success) {
            this.onFailed(response.msg);
          } else {
            if (response.data.list) {
              this.tableData = response.data.list;
              console.log(1,this.tableData);

            } else {
              this.tableData = response.data;
              console.log(2,this.tableData);
            }
            this.tableLength = response.data.total;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //值复制
    clone(obj) {
      //判断是对象，就进行循环复制
      if (typeof obj === "object" && typeof obj !== "null") {
        // 区分是数组还是对象，创建空的数组或对象
        var o =
          Object.prototype.toString.call(obj).slice(8, -1) === "Array"
            ? []
            : {};
        for (var k in obj) {
          // 如果属性对应的值为对象，则递归复制
          if (typeof obj[k] === "object" && typeof obj[k] !== "null") {
            o[k] = clone(obj[k]);
          } else {
            o[k] = obj[k];
          }
        }
      } else {
        //不为对象，直接把值返回
        return obj;
      }
      return o;
    },

    // 删除
    async deleteFunc(id) {
      console.log(id);
      let requestJson = this.privateConfig.delete;

      requestJson.id = id;
      console.log(requestJson);
      //接口1
      if (requestJson.method == "GET" || requestJson.method == "get") {
        let res =await deleteTableData1(requestJson);
     
        try {
          if (res.msg == "success") {
            this.onSuccess("删除成功！");
            this.selectFunc();
          } else {
            this.onFailed(res.msg);
          }
        } catch (error) {
          this.onFailed("删除失败！");
        }
      } else {
        let res =await deleteTableData(requestJson);

        if (res.msg == "success") {
          this.onSuccess("删除成功！");
          this.selectFunc();
        }
      }
    },
    //导出
    async beforeexport(e, b) {
      let obj = {
        url: `${b.Interface.url}`,
        mineId: e.mineId,
        id: e.id,
        method: b.Interface.method,
      };
      exportTableword(obj).then((response) => {
        console.log(response);
        const blob = new Blob([response]);
        const elink = document.createElement("a");
        let timestamp = new Date().getTime();
        var fileName = `安全确认表历史记录-${timestamp}.pdf`;

        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
      // obj.url = `${obj.url}/${e.mineId}/${e.id}`
      // let res = await exportTableword(obj);
      // obj.url = "";

      // //创建一个a标签
      // const elink = document.createElement("a");
      // //下载文件的随机号
      // let timestamp = new Date().getTime();
      // var fileName = `安全确认表历史记录-${timestamp}.pdf`;
      // elink.download = fileName;
      // elink.style.display = "none";
      // //创建一个bolaURL
      // elink.href = URL.createObjectURL(res);
      // //把a标签添加到body里
      // document.body.appendChild(elink);
      // //触发下载事件
      // elink.click();
      // // 释放URL 对象
      // URL.revokeObjectURL(elink.href);
      // document.body.removeChild(elink);
    },

    //成功msg
    onSuccess(message) {
      this.$message({
        message: message || "成功",
        type: "success",
      });
    },
    //失败msg
    onFailed(message) {
      this.$message({
        message: message || "失败",
        type: "error",
      });
    },

    //显示增加dialog
    showAddDialog() {
      let t = this.privateConfig.table;
      for (var i = 0; i < t.length; i++) {
        t[i].value = "";
      }
      this.title = "新增";
      this.id = -1;
      this.visibilityUpdate += 1;
      this.formDisabled = false;
    },

    //显示编辑dialog
    showEditDialog(row) {
      console.log(row);
      let t = this.privateConfig.table;
      for (var i = 0; i < t.length; i++) {
        for (let r of Object.keys(row)) {
          if (r == t[i].prop) {
            t[i].value = row[r];
          }
        }
      }
      this.id = row.id;

      this.title = "编辑";
      this.visibilityUpdate += 1;
      this.formDisabled = false;
    },
    showEdit(row) {
      let t = this.privateConfig.table;
      for (var i = 0; i < t.length; i++) {
        for (let r of Object.keys(row)) {
          if (r == t[i].prop) {
            t[i].value = row[r];
          }
        }
      }
      this.id = row.realId;

      this.title = "编辑";
      this.visibilityUpdate += 1;
      this.formDisabled = false;
    },

    // 查看dialog
    look(row) {
      let t = this.privateConfig.table;
      for (var i = 0; i < t.length; i++) {
        for (let r of Object.keys(row)) {
          if (r == t[i].prop) {
            t[i].value = row[r];
          }
        }
      }
      this.title = "查看";
      this.visibilityUpdate += 1;
      this.formDisabled = true;
    },

    // 删除之前
    beforeRemove(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该记录, 是否继续??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteFunc(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  components: {
    PreviewContent
  },
};
</script>

<style lang="scss" scope>
.el-table .blueBackground {
  background-color: blue;
}

.el-table .redBackground {
  background-color: red;
}

.el-table .yellowBackground {
  background-color: yellow;
}

.el-table .orangeBackground {
  background-color: orange;
}

// 低风险
.blueBackground {
  background-color: blue;
  color: #000;
}
// 重大
.redBackground {
  background-color: red;
  color: #000;
}
// 一般
.yellowBackground {
  background-color: yellow;
  color: #000;
}
// 较大
.orangeBackground {
  background-color: orange;
  color: #000;
}
.el-table .rcBackground {
  background-color: #7ef289;
  color: #333;
}
.el-table .zxBackground {
  background-color: #a0ffec;
  color: #333;
}

.el-table .sjBackground {
  background-color: #aedffd;
  color: #333;
}

.inputButton {
  margin-left: 10px;
}

.title-bareads {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .breadcrumbs {
    cursor: pointer;
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #757c91;
    margin-bottom: 12px;
    .goto {
      margin-right: 20px;
      .el-icon-back {
        font-size: 30px;
      }
    }
    .heto {
      margin-left: 20px;
    }
    .span_an {
      width: 1px;
      height: 18px;
      background: #a5aab9;
    }
  }
}

.right-select {
  width: 100%;

  // padding: 20px 12px;
  margin-bottom: 8px;

  background-color: #fff;
  .right_base {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    .private {
      display: flex;
      align-items: center;
      .p_base {
        font-size: 16px;
        color: #333;
        font-family: Source Han Sans CN;
        font-weight: 400;
        margin-left: 10px;
        margin-right: 10px;
        white-space: nowrap;
      }
    }
    .private_right {
      position: absolute;
      right: 20px;
    }

    .add_more {
      display: flex;
    }
    // .input {
    //   width: 215px;
    //   margin-right: 20px;
    // }

    .dateRangePicker {
      margin-right: 20px;
      margin-bottom: 20px;
      width: 360px;
    }
    p {
      line-height: 38px;
    }
  }
}
.table_ba {
  padding: 0 0 40px 12px;
  background: #fff;
  .table_base {
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
  }
  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
}

:deep(.el-buttom--success) {
  color: #fff;
  background-color: #39ce75;
  border-color: #39ce75;
}

</style>
